﻿@using WorkBasket.Api

@model WorkBasket.Areas.Design.Models.DesignVM
@{
    ViewBag.Title = "Workflow Design";
}
@section Scripts{
    <script src="~/Scripts/app/Design/WorkflowController.js"></script>
    <script src="~/Scripts/app/Design/WFTree.js"></script>
   
 


}
 
 <div class="container" ng-controller="wbdsWorkflowCTRL" ng-cloak>

    <h2>Workflow Design </h2>
    <div class="row">
        <div class="col-md-12">
            <div class="well-lg">
                <label class="label label-default">Select Workflow</label>
                <div>
                    <select class="form-control"
                            ng-model="SelectedWorkflow"
                            ng-options="Workflow.WorkflowName for Workflow in Workflows"
                            ng-change="OnWorkflowChange(SelectedWorkflow)"></select>

                </div>

                <button type="button" class="btn btn-success" ng-click="AddWorkflow()">Create New Workflow</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">

            <div class="panel panel-default">
                <div>
                    <label class="label label-default">Selected Workflow</label>
                    <div class="panel panel-heading" >{{SelectedWorkflow.WorkflowName}} </div>
                    <div class="panel panel-body">
                        <!-- Panel BODY-->
                      
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#Workflow" data-toggle="tab">Workflows</a></li>
                            <li><a href="#Fields" data-toggle="tab">Fields</a></li>
                            <li><a href="#Steps" data-toggle="tab">Process</a></li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content active" id="MyTab">

                            <div class="tab-pane fade " id="Workflow">
                                <div class="panel panel-default" id="Fieldstplt">
                                    <div class="panel-heading">Workflow</div>
                                    <div class="panel-body">
                                        <label class="label label-default">Workflow Name</label>
                                        <input class="form-control"
                                               ng-model="SelectedWorkflow.WorkflowName"
                                               ng-change="UpdateWorkflow(SelectedWorkflow)"
                                               ng-model-options="{ updateOn: 'blur' }"
                                               value="{{SelectedWorkflow.WorkflowName}}" />
                                        <label class="label label-default">Administrators</label>
                                        <table class="table table-hover table-bordered table-condensed table-striped">
                                            <thead>
                                                <tr><th>Name</th><th>Email</th><th>Actions</th>
                                            </thead>
                                            <tbody ng-repeat="admin in Administrators">
                                                <tr>
                                                    <td>
                                                        <div class="input-group input-group-sm">
                                                            <span class="input-group-btn"><button id="cmdAddAdmin" class="btn btn-default btn-sm" onclick="" title="Add Admnistrator"><span class="glyphicon glyphicon-search"></span></button></span>
                                                            <input type="text" class="form-control" placeholder="Username" ng-model="admin.UserName">

                                                        </div>
                                                    </td>
                                                    <td>
                                                        <label class="form-control" ng-model="admin.Email"></label>
                                                    </td>
                                                    <td>
                                                        <button class="btn btn-danger">Delete</button>
                                                    </td>


                                                </tr>
                                            </tbody>
                                            </table>

                                       

                                                <button type="button" class="btn btn-danger" ng-click="DeleteWorkflow(SelectedWorkflow);">Delete Workflow</button>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="Fields">
                                <div class="panel panel-default" id="Fieldstplt">
                                    <div class="panel-heading">Fields</div>
                                    <div class="panel-body">

                                        <table class="table table-hover table-bordered table-condensed table-striped">
                                            <thead>
                                                <tr><th>ID</th><th>Fields</th><th>Field Type</th><th>Info</th><th>Actions</th></tr>
                                            </thead>
                                            <tbody ng-repeat="Field in SelectedFields">
                                                <tr>
                                                    <td><label class="form-control">{{Field.FieldID}}</label></td>
                                                    <td>
                                                        <input class="form-control" ng-model="Field.FieldName" ng-model-options="{ updateOn: 'blur' }" ng-change="UpdateField(Field)" />
                                                    </td>
                                                    <td>
                                                        <select class="form-control" ng-model="Field.FieldType" ng-change="UpdateField(Field)" ng-options="FieldType for FieldType in FieldTypes"></select>
                                                    </td>
                                                    <td>
                                                        <input class="form-control" ng-model="Field.FieldInfo" ng-model-options="{ updateOn: 'blur' }" ng-change="UpdateField(Field)" />
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-default"  ng-click="DeleteField(Field)">Delete</button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <div>
                                       
                                            <button type="button" class="btn btn-default" ng-click="AddField()" >Add</button>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="tab-pane fade" id="Steps">
                                <div class="panel panel-default" id="Stepstplt">
                                    <div class="panel-heading">Process</div>
                                    <div class="panel-body">



                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="well-lg">
                                                    <table class="table table-hover table-bordered table-condensed table-striped">
                                                        <thead>
                                                            <tr><th>ID</th><th>Name</th><th>EffectiveDate</th><th>Delete</th><th>Select</th></tr>
                                                        </thead>
                                                        <tbody ng-repeat="ProcessVersion in ProcessVersions">
                                                            <tr>
                                                                <td><label class="form-control">{{ProcessVersion.ProcessVersionID}}</label></td>
                                                                <td>
                                                                    <input class="form-control"
                                                                           ng-model="ProcessVersion.VersionName"
                                                                           value="{{ProcessVersion.VersionName}}"
                                                                           ng-model-options="{ updateOn: 'blur' }"
                                                                           ng-change="UpdateVersion(ProcessVersion)" />
                                                                </td>
                                                                <td>
                                                                    <input class="form-control datepicker" 
                                                                           ng-model="ProcessVersion.EffectiveDate"
                                                                           ng-model-options="{ updateOn: 'blur' }"
                                                                           ng-change="UpdateVersion(ProcessVersion)"
                                                                           value="{{ProcessVersion.EffectiveDate|date:'short'}}" />
                                                                </td>
                                                                <td>
                                                                    <button type="button"
                                                                            class="btn btn-default"
                                                                            ng-click="SelectVersion(ProcessVersion)"
                                                                            ng-model="ProcessVersion">
                                                                        Select
                                                                    </button>
                                                                </td>
                                                                <td>
                                                                    <button type="button"
                                                                            class="btn btn-danger"
                                                                            ng-click="DeleteVersion(ProcessVersion)"
                                                                            ng-model="ProcessVersion">
                                                                        Delete
                                                                    </button>
                                                                </td>

                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                 
                                                    <button class="btn btn-success" ng-click="AddVersion()">Create New Process Version</button>

                                                </div>

                                            </div>
                                        </div>


                                        <div class="row">

                                            <div class="col-md-4">

                                                <nav class="navbar navbar-default" role="navigation">
                                                    <div class="navbar-form navbar-left">
                                                        <button class="btn btn-default" ng-click="AddRoot()">
                                                            <span class="glyphicon glyphicon-flag"></span>
                                                        </button>
                                                    </div>
                                                </nav>
                                                <div id="jstree" class="WFArea">
                                                    <ul></ul>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="panel panel-default" >
                                                    <div class="panel-heading">
                                                        <h3 class="panel-title">Properties</h3>
                                                    </div>
                                                    <div class="panel-body">
                                                        <div ng-show="SelectedStep != null && (SelectedStep.Type == 'step' || SelectedStep.Type == 'start')">
                                                            <label class="label label-default" for="formview">Form View</label>
                                                            <div class="input-group input-group-sm" id="formview">
                                                                <span class="input-group-btn"><button id="ButtonAddForm" class="btn btn-default btn-sm" onclick="" title="Add Form"><span class="glyphicon glyphicon-plus"></span></button></span>
                                                                <select class="form-control"
                                                                        ng-model="SelectedStep.WorkbasketFormID"
                                                                        ng-change="SaveStep()">
                                                                    <option ng-repeat="Form in WorkflowForms" value="{{Form.FormID}}" ng-selected="SelectedStep.WorkbasketFormID ==Form.FormID">{{Form.FormName}}</option>
                                                                </select>


                                                            </div>
                                                            <label class="label label-default" for="formview">Child Step Process</label>
                                                            <select class="form-control"
                                                                    ng-model="SelectedStep.ChildProcessType">
                                                                <option value="0" selected>Serial</option>
                                                                <option value="1">Parallel</option>
                                                            </select>

                                                            <div class="panel panel-default">
                                                                <div class="panel-heading">
                                                                    <h3 class="panel-title">Permissions</h3>
                                                                </div>
                                                                <div class="panel-body">

                                                                    <div class="radio">
                                                                        <label>
                                                                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                                                                            Anyone
                                                                        </label>
                                                                    </div>
                                                                    <div class="radio">
                                                                        <label>
                                                                            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                                                                            Group:
                                                                        </label>


                                                                    </div>
                                                                    <select class="form-control">
                                                                        <option>Group 1</option>
                                                                        <option>Group 2</option>
                                                                    </select>
                                                                    <div class="radio">
                                                                        <label>
                                                                            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                                                                            Individual:
                                                                        </label>
                                                                    </div>

                                                                    <div class="input-group input-group-sm">
                                                                        <span class="input-group-btn"><button id="ButtonSearch" class="btn btn-default btn-sm" onclick="SearchItem()" title="Search"><span class="glyphicon glyphicon-search"></span></button></span>
                                                                        <input type="text" class="form-control">

                                                                    </div>
                                                                </div>

                                                            </div>
                                                        </div>
                                                        <div ng-show="SelectedStep != null && SelectedStep.Type == 'action'">
                                                       
                                                            <label class="label label-default">Action Type</label>
                                                            <select id="cboActionType" class="form-control">
                                                                @foreach (IAction c in Model.Actions)
                                                                {
                                                                    <option value="@c.GetType().FullName">@c.ActionName</option>
                                                                }
                                                            </select>

                                                            <ul ng-repeat="Item in Properties">
                                                                <li ng-show="Item.Default.length>1  && Item.Name !='Field'">
                                                                    <label class="label label-default">{{Item.Name}}</label>
                                                                    <select class="form-control"
                                                                            ng-model="Item.Value"
                                                                            ng-options="opt for  opt in Item.Default"
                                                                            ng-change="UpdateProperty(Item)"></select>

                                                                </li>

                                                                <li ng-show="Item.Default.length<=1  && Item.Name !='Field'">
                                                                    <label class="label label-default">{{Item.Name}}</label>
                                                                    <input class="form-control"
                                                                           ng-change="UpdateProperty(Item)"
                                                                           ng-model-options="{ updateOn: 'blur' }"
                                                                           ng-model="Item.Value"
                                                                           value="Item.Value" />
                                                                </li>
                                                           </ul>







</div>
                                                     

                                                 </div>



                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--end Panel Body-->
                    </div>
                

                </div>
                    <pre>{{SelectedWorkflow | json}}</pre>
                    <pre>{{WorkflowForms | json}}</pre> 
                
       
            </div>
        </div>
    </div>
</div>

















